<template>
  <div class="menu">
    
      <el-button  icon='el-icon-circle-plus' class="add" type='danger' @click="add" >添加</el-button>
      <list ref="list" @edit='edit'  ></list>
    
    
      <info ref="info" :msg='msg' @updata='updata'  ></info>
  </div>
</template>

<script>
import list from './list.vue'
import info from './info.vue'

export default {
  data(){
    return {
      // 要传给子组件的数据
      msg:{
        // 弹窗是否显示
        isShow:false,
        // 弹窗的类型
        type:'add'
      }
    }
  },
    components:{
        list,
        info,
    },
    methods:{
      // 弹窗开关
      // toggle(){
      //   this.msg.isShow = !this.msg.isShow;
      // },
      add(){
        // 打开弹窗
        this.msg.isShow = true;
        // 添加
        this.msg.type = 'add';
        // 在父组件中通过ref调用子组件的方法
        this.$refs.info.setVal({
           pid:0,
          title:'',
          icon:'',
          type:1,
          url:'',
          status:1
        });
      },
      edit(info){
        // console.log('index中的info',info);
        this.msg.isShow = true;
        // 弹窗类型是编辑
        this.msg.type = 'edit';
        this.$refs.info.setVal(info)
      },
      updata(){
        // 更新列表数据, 调用list组件的函数
        this.$refs.list.getMenuList();
        // 更新inor数据, 调用list组件的函数
        this.$refs.info.getMenuList();
      }

    }
}
</script>

<style>
   .menu{
       text-align: left;
   }


</style>